<html>

<head>
    <meta charset="utf-8">
    <title>组件的生命周期！！</title>
</head>

<body>
    <div id="app"></div>
    <script src="react/react.js"></script>
    <script src="react/JSXTransformer.js"></script>

    <!--
    组件的生命周期可分成三个状态:
        Mounting: 已插入真实 DOM
        Updating: 正在被重新渲染
        Unmounting: 已移出真实 DOM
    生命周期的方法有:
        componentWillMount 在渲染前调用,在客户端也在服务端。
        componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
        componentWillReceiveProps: 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
        shouldComponentUpdate: 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
        componentWillUpdate: 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
        componentDidUpdate: 在组件完成更新后立即调用。在初始化时不会被调用。
        componentWillUnmount: 在组件从 DOM 中移除之前立刻被调用。
     -->


	<script type="text/jsx">
		var MessageBox = React.createClass({
			getInitialState:function(){
				console.log('getInitialState');
				return {
					count: 0,
				}
			},
			getDefaultProps:function(){
				console.log('getDefaultProps');
				return {};
			},
			componentWillMount:function(){
				console.log('componentWillMount');
				var self = this;

				this.timer = setInterval(function(){
					self.setState({
						count: self.state.count + 1,
					})
				},1000);

			},
			componentDidMount:function(){
				console.log('componentDidMount')
				console.log(this.getDOMNode() );
			},
			componentWillUnmount: function(){
				alert('you are tring to kill me !! ')

				clearInterval(this.timer);

			},
			killMySelf: function(){
				React.unmountComponentAtNode(  document.getElementById('app') );
			},
			render:function(){	
				console.log('渲染')
				return ( 
					<div>
						<h1 > 计数： {this.state.count}</h1> 
						<button onClick={this.killMySelf}>卸载掉这个组件</button>
						<Submessage/>
					</div>
				)
			}
		});

		var Submessage = React.createClass({
			render:function(){
				return (
					<h3>写代码很有意思</h3>
				)
			}
		});


		var messageBox = React.render( <MessageBox/>, 
			document.getElementById('app')
		)


	</script>


</body>

</html>